import "./index.less"
import { Space, Table, Tag, Input, Button, message, TablePaginationConfig, Modal, Checkbox, Radio } from 'antd';
import type { CheckboxValueType } from 'antd/es/checkbox/Group';
import type { ColumnsType } from 'antd/es/table';
import { SearchOutlined, PlusOutlined } from '@ant-design/icons';
import { getServerList, updateServer } from "@/api/server"
import type { RadioChangeEvent } from 'antd';
import { useEffect, useRef, useState } from "react";

import systme from "@/api/constant"

let searchValue = {
    orderNo: '',
    pageIndex: 1,
    pageSize: 10
}

interface optionType {
    label: string,
    value: string
}

interface serverType {
    "applyTime": string,
    "content": string,
    "id": string,
    "images": string,
    "level": string,
    "orderId": string,
    "pageIndex": 0,
    "pageSize": 0,
    "remark": string,
    "status": string | number,
    "userId": string,
    "userName": string,
    "orderNo": string,
}

const filterStatue = (index: number) => {
    const imagesStatus = ['待处理', '待评价', '已完成']
    return imagesStatus[index]
}

const onChange = (checkedValues: CheckboxValueType[]) => {
    console.log('checked = ', checkedValues);
};

const options = [
    { label: '不满意', value: '0' },
    { label: '满意', value: '1' },
    { label: '非常满意', value: '2' },
];

export default function server() {
    const initClearData = () => {
        searchValue = {
            orderNo: '',
            pageIndex: 1,
            pageSize: 10
        }
    }

    useEffect(() => {
        initClearData()
        initServerList()
    }, [])

    const handlerSearch = (e: any) => {
        searchValue.orderNo = e.target.value
    }
    const search = () => {
        searchValue.pageIndex = 1
        initServerList()
    }
    const PageChange = (page: number, pageSize: number) => {
        searchValue.pageIndex = page
        searchValue.pageSize = pageSize
        setConfig({ ...saveValue.current, pageSize, current: page })
        initServerList()
    }
    const initServerList = (data = searchValue) => {
        setLoading(true)
        getServerList(data).then((res) => {
            if (res.code == 200) {
                setData(res.data.list)
                setConfig({ ...saveValue.current, total: res.data.total })
            } else {
                message.error(res.msg || systme.ERROR_MESSAGE)
            }
            setLoading(false)
        }).catch((error) => {
            message.error(error || systme.ERROR_MESSAGE)
            setLoading(false)
        })

    }

    let pageConfig: TablePaginationConfig = {
        position: ['bottomCenter'],
        total: 0,
        showTotal: (total: number) => `共 ${total} 条`,
        pageSizeOptions: [10, 20, 30, 40, 50],
        showSizeChanger: true,
        showQuickJumper: true,
        onChange: PageChange,
        pageSize: 10,
        current: 1

    }
    let [config, setConfig] = useState((pageConfig))
    let saveValue = useRef<TablePaginationConfig>()
    useEffect(() => {
        //储存数据
        saveValue.current = config
    }, [config])
    const [dataType, setDataType] = useState<optionType[]>([{
        label: '待处理',
        value: '0'
    }, {
        label: '待评价',
        value: '1'
    }, {
        label: '已完成',
        value: '2'
    }])
    const columns: ColumnsType<serverType> = [
        {
            title: '订单编号',
            dataIndex: 'orderNo',
            key: 'orderNo',
        },
        {
            title: '状态',
            key: 'status',
            render: (_, record: serverType) => (
                <Space size="middle">
                    {filterStatue(record.status as number)}
                </Space>
            ),
        },
        {
            title: '反馈时间',
            key: 'applyTime',
            render: (_, record: serverType) => (
                <Space size="middle">
                    {record.applyTime.slice(0, 10) || ''}
                </Space>
            ),
        },

        {
            title: '操作',
            key: 'action',
            render: (_, record: serverType) => (
                <Space size="middle">
                    {record.status == 1 && <a onClick={() => { handlerServe(record) }}>评价</a>}
                    <a onClick={() => { handlerSee(record) }} >查看</a>
                </Space>
            ),
        },
    ];
    let [serverInfo, setServerInfo] = useState<serverType>()

    const handlerSee = (e: serverType) => {
        setServerInfo(e)
        setIsModalOpen(true)
        setTitle("查看")
    }
    const [isModalOpen2, setIsModalOpen2] = useState(false);
    const handlerServe = (e: serverType) => {
        setServerInfo(e)
        setIsModalOpen2(true)
        setTitle("评价")
    }

    const [title, setTitle] = useState<string>()

    const [data, setData] = useState<serverType[]>([])
    const [loading, setLoading] = useState(true)

    const [isModalOpen, setIsModalOpen] = useState(false);

    const handleOk = () => {
        updateServer({ status: 2, id: serverInfo?.id }).then((res) => {
            if (res.code == 200) {
                setIsModalOpen(false)
                message.success('操作成功')
                initServerList()
            } else {
                message.error(res.msg || systme.ERROR_MESSAGE)
            }
        }).catch(() => {
            message.error(systme.ERROR_MESSAGE)
        })
    }
    const handleCancel = () => {
        setIsModalOpen(false)
    }
    const handleOk2 = () => {
        updateServer({ status: 2, id: serverInfo?.id }).then((res) => {
            if (res.code == 200) {
                setIsModalOpen2(false)
                message.success('操作成功')
                initServerList()
            } else {
                message.error(res.msg || systme.ERROR_MESSAGE)
            }
        }).catch(() => {
            message.error(systme.ERROR_MESSAGE)
        })
    }
    const handleCancel2 = () => {
        setIsModalOpen2(false)
    }
    const onChangeLevel = (e: any) => {
        console.log(e);

    }
    return (
        <div className="box_views">
            <div className="header flex">
                <div className="header_search flex">
                    <div className="item">
                        <Input placeholder="请输入订单号" allowClear onChange={(e: unknown) => { handlerSearch(e) }} width={200} />
                    </div>
                    <Button type="primary" icon={<SearchOutlined />} size="middle" onClick={search}>查询</Button>
                </div>
            </div>
            <Table columns={columns} dataSource={data} pagination={config} rowKey={item => item.id} loading={loading} />
            <Modal title="处理" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} centered bodyStyle={{ height: '400px', width: '500px' }} okText='处理完成' footer={title == "查看" ? null : undefined}>
                <div className="flex_j_c">
                    <div className="personItem">
                        <span> 订单编号：</span>{serverInfo?.orderNo}
                    </div>
                    <div className="personItem">
                        <span>状态：</span>{filterStatue(serverInfo?.status as number)}
                    </div>
                    <div className="personItem">
                        <span>问题描述：</span>{serverInfo?.content}
                    </div>
                    <div className="personItem">
                        <span>相关截图：</span><img src={serverInfo?.images} alt="" />
                    </div>
                </div>
            </Modal>
            <Modal title="评价" open={isModalOpen2} onOk={handleOk2} onCancel={handleCancel2} centered >
                <div className="flex_j_c">
                    <div className="personItem flex_a">
                        <div className="title"> 订单编号：</div>{serverInfo?.orderNo}
                    </div>
                    <div className="personItem flex_a">
                        <div className="title">状态：</div>{filterStatue(serverInfo?.status as number)}
                    </div>
                    <div className="personItem flex_a">
                        <div className="title">问题描述：</div>{serverInfo?.content}
                    </div>
                    <div className="personItem flex_a">
                        <div className="title">评价：</div>
                        <div className="check">
                            <Radio.Group onChange={(e: any) => { onChangeLevel(e) }} defaultValue="a">
                                <Radio.Button value="0">不满意</Radio.Button>
                                <Radio.Button value="1">满意</Radio.Button>
                                <Radio.Button value="2">非常满意</Radio.Button>
                            </Radio.Group>
                        </div>
                    </div>
                </div>
            </Modal>
        </div>
    )
}